import React from 'react'
import Tippy from '@tippyjs/react'
import 'tippy.js/dist/tippy.css' // optional
import 'tippy.js/themes/light.css'
import QuestionSvg from '@/svg/question'

const StringContent = (props) => {
  const { text, children } = props
  const validChildren = children || <QuestionSvg type="tooltip" />
  return (
    <Tippy content={text} theme="light" allowHTML>
      <button className="inline-flex items-center tooltipBtn">{validChildren}</button>
    </Tippy>
  )
}

export default StringContent
